<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
      xmlns="http://www.w3.org/1999/html">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>AssCock</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="/static/images/favicon.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="/static/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="/static/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/static/css/responsive.css">
</head>
<body class="sidebar-main-active right-column-fixed">
<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <!-- Sidebar  -->
    <div class="iq-sidebar">
        <div id="sidebar-scrollbar">
            <nav class="iq-sidebar-menu">
                <ul id="iq-sidebar-toggle" class="iq-menu">
                    <li>
                        <a href="/" class="iq-waves-effect"><i
                                class="las la-newspaper"></i><span>Newsfeed</span></a>
                    </li>
                    <li class="">
                        <a href="/profile" class="iq-waves-effect"><i
                                class="las la-user"></i><span>Profile</span></a>
                    </li>
                    <li>
                        <a href="/friends" class="iq-waves-effect"><i
                                class="las la-user-friends"></i><span>Friend List</span></a>
                    </li>

                    <li>
                        <a href="/weather" class="iq-waves-effect"><i class="ri-snowy-line"></i><span>Weather</span></a>
                    </li>
                    <li>
                        <a href="/anecdotes" class="iq-waves-effect">
                            <i class="ri-book-2-line"></i><span>Anecdotes</span>
                        </a>
                    </li>
                    <li>
                        <a href="/music" class="iq-waves-effect"><i
                                class="ri-play-circle-line"></i><span>Music</span></a>
                    </li>
                    <li>
                </ul>
            </nav>
            <div class="p-3"></div>
        </div>
    </div>
    <!-- TOP Nav Bar -->

    <!-- TOP Nav Bar END -->

    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <nav class="navbar navbar-expand-lg navbar-light p-0">
                <div class="iq-navbar-logo d-flex justify-content-between">
                    <a href="/">
                        <img src="/static/images/logo.png" class="img-fluid" alt="">
                        <span>AssCock</span>
                    </a>
                    <div class="iq-menu-bt align-self-center">
                        <div class="wrapper-menu">
                            <div class="main-circle"><i class="ri-menu-line"></i></div>
                        </div>
                    </div>
                </div>

                <script language="YoptaScript">
                    йопта MusicSearchChange() {
                        участковый musicsearch внатуре ксива.вычислитьЛохаПоНомеру('musicsearch') нахуй
                        участковый searchmusicbutton внатуре ксива.вычислитьЛохаПоНомеру('searchmusicbutton') нахуй
                        musicsearch.добавитьВертухай('input', () внатурепизже {searchmusicbutton.href внатуре `/music/семкиЕсть/${musicsearch.валио.пивасПодмени('/', '').пивасПодмени(' ', '')есть`есть) нахуй
                    есть
                </script>

               <div class="iq-search-bar">
                  <div class="searchbox">
                     <input type="text" class="text search-input" placeholder="Type here to search for some music..." id="musicsearch" oninput="MusicSearchChange()">
                     <a class="search-link" href="/music/search/" id="searchmusicbutton"><i class="ri-search-line"></i></a>
                  </div>
               </div>

                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-label="Toggle navigation">
                    <i class="ri-menu-3-line"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto navbar-list">
                        <li>
                            <a href="/profile" class="iq-waves-effect d-flex align-items-center">
                                <img src="{{current_user.avatar}}" class="img-fluid rounded-circle mr-3" alt="user">
                                <div class="caption">
                                    <h6 class="mb-0 line-height">{{current_user.name}} {{current_user.surname}}</h6>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="/" class="iq-waves-effect d-flex align-items-center">
                                <i class="ri-home-line"></i>
                            </a>
                        </li>

                        <!-- NEW MESSAGES

                        <li class="nav-item dropdown">
                            <a href="#" class="search-toggle iq-waves-effect">
                                <div id="lottie-mail"></div>
                                <span class="bg-primary count-mail"></span>
                            </a>
                            <div class="iq-sub-dropdown">
                                <div class="iq-card shadow-none m-0">
                                    <div class="iq-card-body p-0 ">
                                        <div class="bg-primary p-3">
                                            <h5 class="mb-0 text-white">New Messages<small
                                                    class="badge  badge-light float-right pt-1">1</small></h5>
                                        </div>
                                        <a href="#" class="iq-sub-card">
                                            <div class="media align-items-center">
                                                <div class="">
                                                    <img class="avatar-40 rounded" src="/static/images/user/01.jpg"
                                                         alt="">
                                                </div>
                                                <div class="media-body ml-3">
                                                    <h6 class="mb-0 ">Bni Emma Watson</h6>
                                                    <small class="float-left font-size-12">13 Jun</small>
                                                </div>
                                            </div>
                                        </a>

                                    </div>
                                </div>
                            </div>
                        </li>

                        -->

                    </ul>
                    <ul class="navbar-list">
                        <li>
                            <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                                <i class="ri-arrow-down-s-fill"></i>
                            </a>
                            <div class="iq-sub-dropdown iq-user-dropdown">
                                <div class="iq-card shadow-none m-0">
                                    <div class="iq-card-body p-0 ">
                                        <div class="bg-primary p-3 line-height">
                                            <h5 class="mb-0 text-white line-height">Hello, {{current_user.name}}!</h5>
                                            <span class="text-white font-size-12">Available</span>
                                        </div>
                                        <a href="/profile" class="iq-sub-card iq-bg-primary-hover">
                                            <div class="media align-items-center">
                                                <div class="rounded iq-card-icon iq-bg-primary">
                                                    <i class="ri-file-user-line"></i>
                                                </div>
                                                <div class="media-body ml-3">
                                                    <h6 class="mb-0 ">My Profile</h6>
                                                    <p class="mb-0 font-size-12">View personal profile details.</p>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="/profile/edit" class="iq-sub-card iq-bg-warning-hover">
                                            <div class="media align-items-center">
                                                <div class="rounded iq-card-icon iq-bg-warning">
                                                    <i class="ri-profile-line"></i>
                                                </div>
                                                <div class="media-body ml-3">
                                                    <h6 class="mb-0 ">Edit Profile</h6>
                                                    <p class="mb-0 font-size-12">Modify your personal details.</p>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="/profile/privacy" class="iq-sub-card iq-bg-danger-hover">
                                            <div class="media align-items-center">
                                                <div class="rounded iq-card-icon iq-bg-danger">
                                                    <i class="ri-lock-line"></i>
                                                </div>
                                                <div class="media-body ml-3">
                                                    <h6 class="mb-0 ">Privacy Settings</h6>
                                                    <p class="mb-0 font-size-12">Control your privacy parameters.</p>
                                                </div>
                                            </div>
                                        </a>
                                        <div class="d-inline-block w-100 text-center p-3">
                                            <a class="bg-primary iq-sign-btn" href="/logout" role="button">Sign out<i
                                                    class="ri-login-box-line ml-2"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

    <!-- TOP Nav Bar END -->

    <!-- Right Sidebar Panel Start-->
    <div class="right-sidebar-mini right-sidebar">
        <div class="right-sidebar-panel p-0">
            <div class="iq-card shadow-none">
                <div class="iq-card-body p-0">
                    <div class="media-height p-3">
                        {% for friend in current_user.friends %}
                        <div class="media align-items-center mb-4">
                            <a href="/id{{friend.id}}"><img class="rounded-circle avatar-50" src="{{friend.avatar}}" alt=""></a>
                            <div class="media-body ml-3">
                                <h6 class="mb-0"><a href="/id{{friend.id}}">{{friend.name}} {{friend.surname}}</a></h6>
                                {% if friend.status|length > 48 %}
                                <p class="mb-0">{{friend.status[:45]}}...</p>
                                {% else %}
                                <p class="mb-0">{{friend.status}}</p>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}

                    </div>
                    <div class="right-sidebar-toggle bg-primary mt-3">
                        <i class="ri-arrow-left-line side-left-icon"></i>
                        <i class="ri-arrow-right-line side-right-icon"><span
                                class="ml-3 d-inline-block">Close Menu</span></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Right Sidebar Panel End-->


    {% block content %}
    {% endblock %}

    <!-- Wrapper END -->
    <!-- Footer -->
    <footer class="bg-white iq-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
                        <li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
                    </ul>
                </div>
                <div class="col-lg-6 text-right">
                    Copyright 2020 <a href="#">AssCock</a> All Rights Reserved.
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer END -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/popper.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <!-- Appear JavaScript -->
    <script src="/static/js/jquery.appear.js"></script>
    <!-- Countdown JavaScript -->
    <script src="/static/js/countdown.min.js"></script>
    <!-- Counterup JavaScript -->
    <script src="/static/js/waypoints.min.js"></script>
    <script src="/static/js/jquery.counterup.min.js"></script>
    <!-- Wow JavaScript -->
    <script src="/static/js/wow.min.js"></script>
    <!-- Apexcharts JavaScript -->
    <script src="/static/js/apexcharts.js"></script>
    <!-- Slick JavaScript -->
    <script src="/static/js/slick.min.js"></script>
    <!-- Select2 JavaScript -->
    <script src="/static/js/select2.min.js"></script>
    <!-- Owl Carousel JavaScript -->
    <script src="/static/js/owl.carousel.min.js"></script>
    <!-- Magnific Popup JavaScript -->
    <script src="/static/js/jquery.magnific-popup.min.js"></script>
    <!-- Smooth Scrollbar JavaScript -->
    <script src="/static/js/smooth-scrollbar.js"></script>
    <!-- lottie JavaScript -->
    <script src="/static/js/lottie.js"></script>
    <!-- am core JavaScript -->
    <script src="/static/js/core.js"></script>
    <!-- am charts JavaScript -->
    <script src="/static/js/charts.js"></script>
    <!-- am animated JavaScript -->
    <script src="/static/js/animated.js"></script>
    <!-- am kelly JavaScript -->
    <script src="/static/js/kelly.js"></script>
    <!-- am maps JavaScript -->
    <script src="/static/js/maps.js"></script>
    <!-- am worldLow JavaScript -->
    <script src="/static/js/worldLow.js"></script>
    <!-- Chart Custom JavaScript -->
    <script src="/static/js/chart-custom.js"></script>
    <!-- Custom JavaScript -->
    <script src="/static/js/custom.js"></script>

    <script src="/static/js/myfuncs.js"></script>

    <script src="/static/js/yopta.min.js"></script>
</body>
</html>